<template>
  <view class="container">
    <view class="nav-bar">
      <text>推广邀请</text>
    </view>
    <image class="invite-img" :src="getImageUrl('inbj.png')"></image>
    <view class="invite-top">
      <u-avatar :src="userInfo.avatar" size="110"></u-avatar>
      <view class="salesman-info">
        <view class="" style="font-size: 32rpx">
          {{ userInfo.nickname }}
        </view>
        <!--  -->
        <p style="font-size: 24rpx">业务经理</p>
        <view class="invite-tip"> 我的引荐码 </view>
        <view class="invite-code">
          {{ inviteCode }}
        </view>
      </view>
    </view>
    <view class="qrbox" v-if="inviteCode">
      <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>
    </view>

    <!-- #ifdef APP -->
    <view class="group-btn">
      <button
        class="btn"
        @click="onShare"
        style="background-color: #81c227; font-size: 28rpx; margin-right: 50rpx"
      >
        立即邀请好友
      </button>

      <view
        @click="routeTo('/other_center/salesman-promotion-poster/salesman-promotion-poster')"
        class="btn"
        style="background-color: #f9b120"
      >
        生成推广海报
      </view>
    </view>
    <!-- #endif -->

    <!-- #ifndef APP -->
    <view class="group-btn" style="width: 100%; display: flex; justify-content: center">
      <view
        @click="routeTo('/other_center/salesman-promotion-poster/salesman-promotion-poster')"
        class="btn"
        style="background-color: #f9b120"
      >
        生成推广海报
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import UQRCode from 'uqrcodejs'
import { STATIC_URL } from '@/common/config.js'
export default {
  data() {
    return {
      inviteCode: '',
      userInfo: {}
    }
  },
  onLoad() {
    this.inviteCode = uni.getStorageSync('salesCode')
    this.userInfo = uni.getStorageSync('userInfo')
  },
  onReady() {
    // 获取uQRCode实例
    var qr = new UQRCode()
    // 设置二维码内容
    qr.data = STATIC_URL + '/h5?brokerageCode=' + this.inviteCode
    // 设置二维码大小，  必须与canvas设置的宽高一致
    qr.size = 200
    // 调用制作二维码方法
    qr.make()
    // 获取canvas上下文
    var canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件，this必须传入
    // 设置uQRCode实例的canvas上下文
    qr.canvasContext = canvasContext
    // 调用绘制方法将二维码图案绘制到canvas上
    qr.drawCanvas()
  },
  // onShareAppMessage(OBJECT) {
  // 	return {
  // 		title: "参加拼团",
  // 		imageUrl: this.goodsInfo.items[0].picUrl,
  // 		path: `goods/group-goods-join/group-goods-join?id=${this.group_id}&orderId=${this.orderId}`
  // 	}
  // },
  methods: {
    routeTo(url) {
      this.$utils.route(url)
    },
    onShare() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: STATIC_URL + '/h5?brokerageCode=' + this.inviteCode,
        title: '邀请有礼',
        summary: '邀请好友注册领好礼！',
        imageUrl: getImageUrl('logo.png'),
        success: function (res) {
          console.log('success:' + JSON.stringify(res))
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err))
        }
      })
    }
  }
}
</script>

<style>
page {
  background-image: linear-gradient(to bottom, #2cd6bf 50%, #1286d3 100%);
  position: relative;
}

.nav-bar {
  position: absolute;
  top: 66rpx;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 36rpx;
}

.invite-img {
  width: 650rpx;
  height: 850rpx;
  position: absolute;
  top: 148rpx;
  left: 50%;
  transform: translateX(-50%);
}

.invite-top {
  width: 650rpx;
  height: 180rpx;
  background-color: #f5f3fd;
  border-radius: 20rpx 20rpx 0 0;
  position: absolute;
  top: 148rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.salesman-info {
  margin-left: 10rpx;
  line-height: 50rpx;
}

.invite-tip {
  position: absolute;
  top: 640rpx;
  left: 50%;
  transform: translateX(-50%);
}

.invite-code {
  width: 400rpx;
  height: 80rpx;
  position: absolute;
  top: 700rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f5f3fd;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  font-weight: 700;
}

.group-btn {
  position: absolute;
  top: 1060rpx;
  padding: 50rpx;
  display: flex;
}

.btn {
  width: 300rpx;
  height: 80rpx;
  color: #fff;
  border-radius: 40rpx;
  line-height: 80rpx;
  text-align: center;
}

.qrbox {
  position: absolute;
  top: 360rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
